<template>
  <div>
    <el-select
      v-model="tagFieldValue"
      placeholder="请选择"
      clearable
      @change="handleUpdateValue"
    >
      <el-option
        v-for="item in fieldOptions"
        :key="item.id"
        :label="item.fieldShowName"
        :value="item.fieldName"
      >
      </el-option>
    </el-select>
  </div>
</template>
  
<script>
import { tagTableAndColumnConfigList } from "@/api/bianqian/tagApi";
import store from "@/store";
export default {
  name: "tagOperator",
  props: {
    value: {
      type: [String],
      default: null,
    },

    row: {
      type: Object,
      default: () => {},
    },
  },

  watch: {
    value(val) {
      this.tagFieldValue = val;
    },
    row: {
      deep: true,
      handler(e) {
        const { tagField } = e;
        this.tagFieldValue = tagField;
      },
    },
    // tagField英文变为中文，前提是获取到接口
    "row.tabName": {
      deep: true,
      handler(e) {
        const { tagField } = e;
        if (e) {
          this.fieldList(e);
        }
      },
    },
  },
  computed: {},

  data() {
    return {
      tagFieldValue: "",
      fieldOptions: [],
      fieldOptionsCode: "",
    };
  },

  mounted() {
    const { tagField = "", tabName } = this.row;
    this.tagFieldValue = tagField;
    if (tabName) {
      this.fieldList(tabName);
    }
  },
  methods: {
    // 字段
    fieldList(tabName) {
      const params = {
        userId: store.getters.user_id.toString(),
        userName: store.getters.userName.toString(),
        token: store.getters.token.toString(),
        type: "2",
        // 需要传tableNameList中的表名
        tableName: tabName,
      };
      tagTableAndColumnConfigList(params).then((res) => {
        this.fieldOptions = res.resultdata;
        let item = this.fieldOptions.find(e => e.fieldName === this.value)
        if (item) {
          this.handleUpdateValue(this.value, 1)
        }
      });
    },
    // 总的逻辑来处理数据
    handleUpdateValue(e, type) {
      let list = this.fieldOptions
      let item = list.find(f => f.fieldName === e)
      // console.log('test', item)
      if(item) {
        let param = {
          val: e, 
          item: {...item}
        }
        if (type == 1) {
          console.log('sss---------------- set')
          param.type = 1
        } else {
        }
        this.$emit("change", param);

        // this.$emit("value", param);
      }
     
    },
  },
};
</script>
  
  <style  scoped>
</style>